﻿
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/MyMasterPage.cshtml";
}
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=2COzFaICuIyVj7V3VetKfmdRVnX8BhVr"></script>
<link href="~/map/style.css" rel="stylesheet" />
<div id="map">
    <section class="banner-section">
        <div class="section-bg" style="background-image: url('assets/img/parallax.jpg');"></div>
        <div class="container">
            <div class="row">
                <div class="page-banner-content col">
                    <h1 class="text-white">公司发展历程</h1>
                    <span>奔达摩托创建于1994年，前身为浙江中南摩托车有限公司，是浙江省历史最悠久的四大骨干摩托车企业之一，具有独立机动车生产资质和出口资质。 2012年经过重组转型，全面取消传统产品线，成立独立重机研发部门与发动机事业部，开始娱乐个性化大排量重型机车与动力系统设计研发。是一家具备整车设计、动力研发、动力制造、整车制造等完整的全流程制造能力的企业。</span>
                    <div onclick="to(this,10,126.702156,48.821085,'杨丰源3','333333333333')" class="text-white">
                        <span class="location-num">11</span>
                        <div class="location-addr"><h3>杨丰源3</h3>
                        <p class="addr-info">333333333333</p></div>
                    </div>
                    <!-- breadctumb -->

                </div>
            </div>
        </div>
    </section>
    <div class="w1150">
        <div id="loadingDiv" style="display: none">
            <div id="over" style=" position: absolute;top: 0;left: 0; width: 100%;height: 100%; background-color: #000;opacity:0.7;z-index: 1000;"></div>
            <div id="layout" style="position: absolute;top: 40%; left: 40%;width: 20%; height: 20%;  z-index: 1001;text-align:center;">
                <img src="~/map/loading.gif" /><br />
                <h2 style="color: #fff;">数据加载中....</h2>
            </div>
        </div>

        <div class="video-wrapper">
            <div class="map-top clearfix">
                <div class="location-cur-pos js-cur-position">
                    <span class="location-col-red" id="location-name">【{{provincevalue}}】</span> 附近共有<span class="location-col-red" id="store-num">{{netWrorkListlength}}</span>个销售网点
                </div>
              
                <div class="location-section form-section js-location-select clearfix">
                    <div class="xm-select" style="float: left;">
                        <div class="dropdown">
                            <label class="iconfont" for="city">∨</label>
                           
                            <select placeholder="请选择" class="js-province" id="province" name="addr_province" v-model="provincevalue" @@change="getProvinceSelected">
                                <option value="全国">全国</option>
                                <option :value="item.AreaName" v-for="item in provinceList">{{item.AreaName}}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="location-main">
                <div class="fl location-shop-con">
                    <div class="search-box" style="display: none;">
                        <input class="search-input" id="search_box_input" type="text" placeholder="请输入要检索的线下销售网点信息">
                        <span class="search-icon"></span>
                    </div>
                    <div class="location-shop-detail">
                        <ul class="location-list js-store" id="store-list" style="height:450px;overflow: scroll">

                        </ul>
                        <div class="xm-controls xm-controls-small js-pager-controls" page="1" style="float: left;">
                        </div>
                    </div>
                </div>
                <div class="location-map">
                    <div id="container" style="width: 100%; height: 100%; overflow: hidden; position: relative; z-index: 0; background-color: rgb(243, 241, 236); color: rgb(0, 0, 0); text-align:left;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    
    var vm = new Vue({
        el: "#map",
        data: {
            provincevalue:'全国',
            provinceList: [],
            netWrorkList: [],
            netWrorkListlength:0,
        },
        mounted() {
            this.getData();
            this.getLevel()
        },
        methods: {
            toNnclick1(a,b,c,d,e,f) {
                console.log(a, b, c, d, e, f)
            },
            getData() {
                console.log("来了老弟")
                var map = new BMap.Map("container");          // 创建地图实例     // 初始化地图，设置中心点坐标和地图级别
                map.centerAndZoom("海南省", 5);
                map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
                map.addControl(new BMap.NavigationControl());
                map.addControl(new BMap.NavigationControl());
                map.addControl(new BMap.ScaleControl());
                map.addControl(new BMap.OverviewMapControl());
                map.addControl(new BMap.MapTypeControl());
                this.getLocal("province=全国");
                
            },
            //查询网点 省份
            getLevel() {
                var that = this
                $.ajax({
                    type: 'GET',
                    url: '/SystemManage/Area/GetPageListJson?pageSize=100&pageIndex=1&AreaLevel=1',
                    data: {},
                    success: function (res) {
                        that.provinceList = res.Result
                        vm.$forceUpdate();
                        console.log(that.provinceList)
                    }
                });
            },
            //省市下拉框查找网点
            getProvinceSelected() {
                this.getLocal("province=" + this.provincevalue);//执行查找数据
                //console.log(this.provincevalue)
            },
            //执行数据
            getLocal(urlData) {
                var result = [];
                var result1 = [];
                var reg = [];
                //console.log(urlData)
                if (urlData != 'province=贵州省') {//province=贵州省 这是 搜索框的。
                    result = [
                        {
                            "id": "515", "province": "\u6e56\u5317\u7701", "area": "\u5b9c\u660c", "shopname": "\u77e5\u6765\u667a\u80fd\u79d1\u6280",
                            "shopaddr": "\u6e56\u5317\u7701\u5b9c\u660c\u5e02\u5747\u7476\u5e7f\u573a\u4e00\u697c\u77e5\u6765\u667a\u80fd\u4f53\u9a8c\u9986",
                            "location": "111.31098109196,30.732757818026"
                        },
                        {
                            "id": "516", "province": "\u6e56\u5317\u7701", "area": "\u6b66\u6c49", "shopname": "\u6b66\u6c49\u89e3\u653e\u5927\u9053\u4f18\u8da3\u5e97",
                            "shopaddr": "\u6e56\u5317\u7701\u6b66\u6c49\u5e02\u6c5f\u6c49\u533a\u89e3\u653e\u5927\u9053557\u53f7\u4e2d\u5c71\u5e7f\u573a1\u697c\u82cf\u5b81\u6613\u8d2d\u4f18\u8da3", "location": "114.27613872848,30.587851596764"
                        }, { "id": "517", "province": "\u6e56\u5317\u7701", "area": "\u6b66\u6c49", "shopname": "\u6b66\u6c49\u5149\u8c37\u4f18\u8da3\u5e97", "shopaddr": "\u6e56\u5317\u7701\u6b66\u6c49\u5e02\u6d2a\u5c71\u533a\u6c11\u9662\u8def\u5149\u8c37\u5e7f\u573a\u8d44\u672c\u5927\u53a6\u8d1f\u4e00\u697c\u82cf\u5b81\u6613\u8d2d", "location": "114.40624298256,30.510448272271" }, { "id": "518", "province": "\u6e56\u5317\u7701", "area": "\u8944\u9633", "shopname": "\u8d35\u53cb\u7535\u5668\u6709\u9650\u516c\u53f8", "shopaddr": "\u6e56\u5317\u7701\u8944\u9633\u5e02\u6a0a\u57ce\u533a\u6625\u5143\u8def8\u53f7\u73b0\u4ee3\u57ce\u6570\u7801\u6e2f\u4e00\u697c1038\u53f7", "location": "112.14366834884,32.058976142962" }, { "id": "519", "province": "\u6e56\u5317\u7701", "area": "\u5341\u5830", "shopname": "\u9f0e\u5174\u6295\u5f71\u79d1\u6280\u6709\u9650\u516c\u53f8", "shopaddr": "\u6e56\u5317\u7701\u5341\u5830\u5e02\u5f20\u6e7e\u533a\u516d\u5830\u6cf0\u5f18\u7535\u8111\u57ce\u4e8c\u697cA\u533a45\u53f7", "location": "110.7906542215,32.661244015944" },
                        { "id": "520", "province": "\u6e56\u5317\u7701", "area": "\u6069\u65bd", "shopname": "\u5dde\u987a\u5174\u8fbe\u7535\u8111\u6709\u9650\u516c\u53f8", "shopaddr": "\u6e56\u5317\u7701\u6069\u65bd\u5dde\u56fd\u6cf0\u5927\u53a62\u697c\u987a\u8fbe\u7535\u8111", "location": "109.4926968993,30.278629959823" }, { "id": "521", "province": "\u6e56\u5317\u7701", "area": "\u8346\u5dde", "shopname": "\u767e\u4fe1\u7535\u8111", "shopaddr": "\u6e56\u5317\u7701\u8346\u5dde\u5e02\u6c99\u5e02\u533a\u7ea2\u95e8\u8def\u98de\u817e\u6570\u7801\u5e7f\u573a\u4e8c\u697c2008\u53f7\uff08\u8346\u5dde\u767e\u4fe1\u7535\u8111\uff09", "location": "112.26757444672,30.312061976048" },
                        {
                            "id": "522", "province": "\u6e56\u5317\u7701",
                            "area": "\u76d1\u5229",
                            "shopname": "\u8bba\u7c73\u667a\u6167\u5c45\u5bb6\u751f\u6d3b\u9986",
                            "shopaddr": "\u6e56\u5317\u7701\u8346\u5dde\u5e02\u76d1\u5229\u767e\u665f\u5e7f\u573a\u4e8c\u697c296\u53f7",
                            "location": "113.0019564425,29.848933249111"
                        },
                        {
                            "id": "533", "province": "贵州省",
                            "area": "贵阳",
                            "shopname": "杨丰源",
                            "shopaddr": "2222222",
                            "location": "100.081267,25.08334"
                        },
                        {
                            "id": "533", "province": "新疆省",
                            "area": "阿萨",
                            "shopname": "杨丰源1",
                            "shopaddr": "33333",
                            "location": "88.08623,31.147089"
                        },
                        {
                            "id": "533", "province": "吉林省",
                            "area": "哈尔滨",
                            "shopname": "杨丰源3",
                            "shopaddr": "333333333333",
                            "location": "126.702156,48.821085"
                        },


                    ];
                    result1 = eval(result);
                    reg = eval(result);
                } else {
                    result = [
                        {
                            "id": "533", "province": "贵州省",
                            "area": "贵阳",
                            "shopname": "杨丰源",
                            "shopaddr": "2222222",
                            "location": "100.081267,25.08334"
                        },
                        {
                            "id": "533", "province": "新疆省",
                            "area": "阿萨",
                            "shopname": "杨丰源1",
                            "shopaddr": "33333",
                            "location": "88.08623,31.147089"
                        },
                        {
                            "id": "533", "province": "吉林省",
                            "area": "哈尔滨",
                            "shopname": "杨丰源3",
                            "shopaddr": "333333333333",
                            "location": "126.702156,48.821085"
                        },


                    ];
                    result1 = eval(result);
                    reg = eval(result);
                }
                this.netWrorkListlength = reg.length;//赋值门店个数
                this.netWrorkList = result;//赋值门店个数
                //console.log("可以取消了")
                document.getElementById("loadingDiv").style.display = "none";//loading取消
                var map = new BMap.Map("container");     
                var storeList = "";
                map.clearOverlays();
                var pointsView = [];
                for (var i = 0; i < reg.length; i++) {
                    var n = i + 1;
                    var p = reg[i]['location'].split(',');
                    var point = new BMap.Point(p[0], p[1]);
                    pointsView.push(point);

                    var content = "<p style='font-weight:600'>" + reg[i].shopname + "</p><p style='line-height: 20px;'>地址：" + reg[i].shopaddr + "</p>";
                    var myIcon = new BMap.Icon("/map/bd1.png", new BMap.Size(21, 33), {
                        offset: new BMap.Size(10, 25), // 指定定位位置
                    });
                    var marker = new BMap.Marker(point, { icon: myIcon });        // 创建标注
                    var label = new BMap.Label(n, {
                        offset: new BMap.Size(0, 3)
                    });
                    label.setStyle({
                        width: '21px', background: 'none', color: '#fff', border: 'none', textAlign: 'center'//只要对label样式进行设置就可达到在标注图标上显示数字的效果
                    });
                    marker.setLabel(label);//显示地理名称 a
                    map.addOverlay(marker);
                    this.addClickHandler(content, marker);
                   
                    storeList += '<li @@click="to(this,' + i + ',' + p[0] + ',' + p[1] + ',\'' + reg[i].shopname + '\',\'' + reg[i].shopaddr + '\')"><span class="location-num">' + n + '</span><div class="location-addr">'
                        + '<h3>' + reg[i].shopname + '</h3> <p class="addr-info">' + reg[i].shopaddr + '</p></div>'
                        + '</li>';
                    //console.log(storeList)
                }
                //让所有点在视野范围内
                map.setViewport(pointsView);
            },
            ///点击将信息内容加入白标注中
            addClickHandler(content, marker) {
                var that = this;
                marker.addEventListener("click", function (e) {
                    marker.setAnimation(null);
                    //console.log(content, e)
                    that.openInfo(content, e);
                }
                );
            },
            openInfo(content, e) {
               
                var map = new BMap.Map("container");
                var opts = {
                    width: 250,     // 信息窗口宽度
                    height: 50,     // 信息窗口高度
                    title: "", // 信息窗口标题
                    enableMessage: true//设置允许信息窗发送短息
                };
                var p = e.target;
                var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
                var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
             
                map.openInfoWindow(infoWindow, point); //开启信息窗口
            },
            to(obj, i, x, y, shopname, shopaddr) {

                console.log("进来了")
                var allOverlay = map.getOverlays();
                var last = allOverlay.length - 1;
                map.removeOverlay(allOverlay[last]);
                $(obj).addClass("addMove");
                $(obj).siblings().removeClass("addMove");
                var point = new BMap.Point(x, y);
                map.centerAndZoom(point, 15);
                var myIcon = new BMap.Icon("/map/bd2.png", new BMap.Size(21, 33), {
                    offset: new BMap.Size(10, 25), // 指定定位位置
                });
                var marker = new BMap.Marker(point, { icon: myIcon });        // 创建标注
                var n = i + 1;
                var label = new BMap.Label(n, {
                    offset: new BMap.Size(0, 3)
                });
                label.setStyle({
                    width: '21px', background: 'none', color: '#fff', border: 'none', textAlign: 'center'//只要对label样式进行设置就可达到在标注图标上显示数字的效果
                });
                marker.setLabel(label);//显示地理名称 a
                map.addOverlay(marker);
                var content = "<p style='font-weight:600'>" + shopname + "</p><p style='line-height: 20px;'>地址：" + shopaddr + "</p>";
               // console.log(333)
                this.addClickHandler(content, marker);

            }

        }
    })
    function to(obj, i, x, y, shopname, shopaddr) {
        var map = new BMap.Map("container");   
        console.log("进来了")
        
        var allOverlay = map.getOverlays();
        var last = allOverlay.length - 1;
        map.removeOverlay(allOverlay[last]);
        $(obj).addClass("addMove");
        $(obj).siblings().removeClass("addMove");
        var point = new BMap.Point(x, y);
        map.centerAndZoom(point, 15);
        var myIcon = new BMap.Icon("/map/bd2.png", new BMap.Size(21, 33), {
            offset: new BMap.Size(10, 25), // 指定定位位置
        });
        var marker = new BMap.Marker(point, { icon: myIcon });        // 创建标注
        var n = i + 1;
        var label = new BMap.Label(n, {
            offset: new BMap.Size(0, 3)
        });
        label.setStyle({
            width: '21px', background: 'none', color: '#fff', border: 'none', textAlign: 'center'//只要对label样式进行设置就可达到在标注图标上显示数字的效果
        });
        marker.setLabel(label);//显示地理名称 a
        map.addOverlay(marker);
        var content = "<p style='font-weight:600'>" + shopname + "</p><p style='line-height: 20px;'>地址：" + shopaddr + "</p>";
        console.log(333)
        this.vm.addClickHandler(content, marker);

    }
</script>

